<template>
	<view>
		<view class="header-back"></view>
		<view class="logon-form">
			<view class="form-row">
				<view class="form-item-left">
					<view class="form-icon">
						<image class="img-full" src="@/static/logon/icon1.png"></image>
					</view>
					<uni-easyinput class="form-input" :inputBorder="false" primaryColor="#C2C2C2" trim="all" v-model="form.phone" placeholder="请输入手机号" placeholderStyle="font-size: 28rpx;" ></uni-easyinput>
				</view>
			</view>
			<view class="form-row">
				<view class="form-item-left">
					<view class="form-icon">
						<image class="img-full" src="@/static/logon/icon2.png"></image>
					</view>
					<uni-easyinput class="form-input" :inputBorder="false" primaryColor="#C2C2C2" trim="all" v-model="form.code" placeholder="请输入验证码" placeholderStyle="font-size: 28rpx;" ></uni-easyinput>
				</view>
				<view class="form-item-right">
					<view class="get-code" :class="{'dis':isyzm}" @click="getyzm">
						{{!isyzm?'获取验证码':count+'s'}}
					</view>
				</view>
			</view>
			<view class="form-row">
				<view class="form-item-left">
					<view class="form-icon">
						<image class="img-full" src="@/static/logon/icon3.png"></image>
					</view>
					<uni-easyinput class="form-input" :inputBorder="false" primaryColor="#C2C2C2" trim="all" v-model="form.nickname" placeholder="请输入昵称" placeholderStyle="font-size: 28rpx;" ></uni-easyinput>
				</view>
			</view>
			<view class="form-row">
				<view class="form-item-left">
					<view class="form-icon">
						<image class="img-full" src="@/static/logon/icon4.png"></image>
					</view>
					<uni-easyinput type="password" class="form-input" :inputBorder="false" primaryColor="#C2C2C2" trim="all" v-model="form.password" placeholder="请输入密码" placeholderStyle="font-size: 28rpx;" ></uni-easyinput>
				</view>
			</view>
			<view class="form-row">
				<view class="form-item-left">
					<view class="form-icon">
						<image class="img-full" src="@/static/logon/icon4.png"></image>
					</view>
					<uni-easyinput type="password" class="form-input" :inputBorder="false" primaryColor="#C2C2C2" trim="all" v-model="form.confirmPassword" placeholder="请确认密码" placeholderStyle="font-size: 28rpx;" ></uni-easyinput>
				</view>
			</view>
		</view>
		<view class="bottom-but">
			<view class="submit-but" @click="register">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					phone: '',
					code: '',
					nickname: '',
					password: '',
					confirmPassword: '',
				},
				isyzm: false,
				count:'120',
				
			};
		},
		methods: {
			getyzm(){
				if(this.isyzm) return;
				if(!this.form.phone){
					uni.showToast({
						title: "请输入手机号",
						icon: "none",
						duration: 2000,
					});
					return;
				}
				this.$request({
					url: this.$api.yzm,
					data: {
						area: '+86',
						mobile: this.form.phone,
					},
					successCb: (res) => {
						uni.hideLoading();
						this.isyzm= true;
						var timer= setInterval(()=>{
							this.count--;
							if(this.count==0){
								clearInterval(timer);
								this.count='120';
								this.isyzm= false;
							}
						},1000)
					},
					failCb(e) {
						// uni.hideLoading();
						console.log(e);
						uni.showToast({
							title: e.data.msg||'服务器异常',
							icon: "none",
							duration: 2000,
						});
					}
				});
			},
			register(){
				if(!this.form.phone){
					uni.showToast({
						title: "请输入手机号",
						icon: "none",
						duration: 2000,
					});
					return;
				}
				if(!this.form.code){
					uni.showToast({
						title: "请输入验证码",
						icon: "none",
						duration: 2000,
					});
					return;
				}
				if(!this.form.phone){
					uni.showToast({
						title: "请输入手机号",
						icon: "none",
						duration: 2000,
					});
					return;
				}
				if(!this.form.nickname){
					uni.showToast({
						title: "请输入昵称",
						icon: "none",
						duration: 2000,
					});
					return;
				}
				if(!this.form.password){
					uni.showToast({
						title: "请输入密码",
						icon: "none",
						duration: 2000,
					});
					return;
				}
				if(!this.form.confirmPassword){
					uni.showToast({
						title: "请输入确认密码",
						icon: "none",
						duration: 2000,
					});
					return;
				}
				if(this.form.password!=this.form.confirmPassword){
					uni.showToast({
						title: "确认密码不一致",
						icon: "none",
						duration: 2000,
					});
					return;
				}
				this.$request({
					url: this.$api.register,
					data: {
						areacode: '+86',
						mobile: this.form.phone,
						code: this.form.code,
						nickname: this.form.nickname,
						password: this.form.password,
						// confirmPassword: '',
					},
					successCb: (res) => {
						uni.hideLoading();
						uni.navigateBack();
					},
					failCb(e) {
						// uni.hideLoading();
						console.log(e);
						uni.showToast({
							title: e.data.msg||'服务器异常',
							icon: "none",
							duration: 2000,
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F5F7;
	}
	.dis{
		background-color: rgba(0,0,0,0.3) !important;
	}
	.header-back {
		height: 150rpx;
		width: 100%;
		background-image: linear-gradient(to bottom, #EE5953, #EE5953, #F4F5F7);
	}
	.logon-form {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		margin: 0 auto;
		transform: translateY(-80rpx);
		.form-row {
			padding: 28rpx 0;
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #F5F5F5;
			.form-item-left,.form-item-right {
				display: flex;
				align-items: center;
			}
			.form-item-left {
				flex:1;
			}
			.form-icon {
				width: 48rpx;
				height: 48rpx;
			}
			.get-code {
				width: 168rpx;
				height: 50rpx;
				background: #EE5953;
				border-radius: 8rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 50rpx;
				text-align: center;
			}
		}
	}
	.bottom-but {
		position: fixed;
		bottom: 0%;
		left: 0;
		width: 100%;
		height: 200rpx;
		padding: 32rpx 64rpx;
		box-sizing: border-box;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(51,51,51,0.2);
		.submit-but {
			width: 622rpx;
			height: 88rpx;
			background: #EE5953;
			border-radius: 16rpx;
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
	}
</style>
